<template>
  <div class="reg">
    <el-form class="reg-form" ref="regForm" :model="regForm" :rules="regRules">
      <div class="head-sculpture">
        <div class="title">
          <img :src="src" />
        </div>
        <el-upload
          list-type="picture"
          accept=".jpg, .png"
          :limit="1"
          :auto-upload="false"
          ref="upload"
          :show-file-list="false"
          :file-list="fileList"
          :on-change="getFile"
        >
          <!-- <i class="el-icon-plus"></i> -->
          <h3 class="nickname" @click="fileList = []">上传头像</h3>
        </el-upload>
      </div>
      <el-form-item style="text-align: left">
        <span class="svg-container gender">性&nbsp;&nbsp;&nbsp;别: </span>
        <el-radio v-model="radio" label="1">男</el-radio>
        <el-radio v-model="radio" label="2">女</el-radio>
      </el-form-item>
      <el-form-item prop="nikeName">
        <span class="svg-container"> 昵&nbsp;&nbsp;&nbsp;称: </span>
        <el-input
          ref="username"
          placeholder="请输入昵称"
          name="username"
          type="text"
          class="ip-it"
          v-model="regForm.nikeName"
        />
      </el-form-item>

      <el-form-item prop="userName">
        <span class="svg-container"> 用户名: </span>
        <el-input
          ref="username"
          placeholder="请输入用户名"
          name="username"
          type="text"
          class="ip-it"
          v-model="regForm.userName"
        />
      </el-form-item>
      <el-form-item prop="mobile">
        <span class="svg-container"> 手机号: </span>
        <el-input
          ref="username"
          placeholder="请输入手机号码"
          name="username"
          type="text"
          class="ip-it"
          v-model="regForm.mobile"
        />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container"> 密&nbsp;&nbsp;&nbsp;码: </span>
        <el-input
          ref="username"
          placeholder="请输入密码"
          name="username"
          type="password"
          class="ip-it"
          v-model="regForm.password"
        />
      </el-form-item>
      <div>
        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%; margin-bottom: 30px"
          @click="logon"
          >注册</el-button
        >
      </div>
    </el-form>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  name: "Login",
  data() {
    // 手机号效验
    function validMoblie(str) {
      return /^1[3-9]\d{9}/.test(str);
    }
    const validateUsermobile = (rule, value, callback) => {
      validMoblie(value)
        ? callback()
        : callback(new Error("请输入正确的11位手机号"));
    };
    const validateusername = (rule, value, callback) => {
      const rge = /^[\u4e00-\u9fa5a-zA-Z0-9]{2,12}$/;
      if (!rge.test(value)) {
        callback(new Error("请输入字母,数字,4-16位"));
      } else {
        callback();
      }
    };

    return {
      radio: "1",
      loading: false,
      src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp515017570.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681739150&t=0e6df3f3832d7df2eb64402c03b44b86",
      //接收上传的文件
      fileList: [],
      regForm: {
        nikeName: "",
        userName: "",
        mobile: "",
        password: "",
      },
      regRules: {
        nikeName: [
          { required: true, trigger: "blur", message: "昵称不能为空" },
          { validator: validateusername },
        ],
        userName: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
          { validator: validateusername },
        ],
        mobile: [
          { required: true, trigger: "blur", message: "手机号不能为空" },
          { validator: validateUsermobile },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
          { trigger: "blur", min: 6, max: 16, message: "密码为6-16位" },
        ],
      },
    };
  },
  methods: {
    //注册
    logon() {},
    //上传头像
    getFile(file, fileList) {
      console.log(file.url, "dile.url");
      if (this.beforeAvatarUpload(file)) {
        // this.getBase64(file.raw).then((res) => {
        this.src = file.url;
        // alert(11111111111);
        //ruleForm是我接收后端传过来的数据
        // this.ruleForm.imagePath=res
        // });
      }
    },
    // getBase64(file) {
    //   return new Promise(function (resolve, reject) {
    //     const reader = new FileReader();
    //     let imgResult = "";
    //     reader.readAsDataURL(file);
    //     reader.onload = function () {
    //       imgResult = reader.result;
    //     };
    //     reader.onerror = function (error) {
    //       reject(error);
    //     };
    //     reader.onloadend = function () {
    //       resolve(imgResult);
    //     };
    //   });
    // },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        alert("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
  },
};
</script>
<style scoped>
.feg-form {
  position: relative;
  width: 520px;
  max-width: 100%;
  padding: 14px 35px 0;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
.el-form-item__error {
  left: 54px;
}
.head-sculpture {
  text-align: center;
}
.title img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}
.nickname {
  color: #000;
}

.svg-container {
  display: inline-block;
}
.svg-container {
  color: #000;
  font-size: 16px;
  margin-right: 5px;
}

.ip-it {
  width: 70%;
}
</style>